<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 60px;
				border: 1px solid orange;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div>
			<span class="hour">xxx</span>:
			<span class="min">xxx</span>:
			<span class="sec">xxx</span>
		</div>
		<script type="text/javascript">
			window.addEventListener('DOMContentLoaded', function() {
				ms();
			})

			//截止时间
			var target = new Date('2022-08-12 12:30:00');

			function ms() {
				//截止时间毫秒数 - 当前时间的毫秒数  转为秒
				var td = (target.getTime() - Date.now()) / 1000;
				//计算小时数 转化为整数
				var hour = Number.parseInt(td / 60 / 60 % 24);
				//计算分钟数 转化为整数
				var min = Number.parseInt(td / 60 % 60);
				//计算秒数 转化为整数
				var sec = Number.parseInt(td % 60);

				var hourSpan = document.querySelector('.hour');
				hourSpan.innerHTML = hour < 10 ? "0" + hour : hour;

				var minSpan = document.querySelector('.min');
				minSpan.innerHTML = min < 10 ? "0" + min : min;

				var secSpan = document.querySelector('.sec');
				secSpan.innerHTML = sec < 10 ? "0" + sec : sec;
			}
			setInterval(ms, 1000);
		</script>
	</body>
</html>
